<template>
  <div v-if="permissionsLists(47)">
    <page-header :title="$t('m.settings')" :has-return="false" />

    <div class="container">
      <div
        class="setting-box"
        v-if="isArrayEqual([120, 121, 220, 220], permissionsLists)"
      >
        <div class="title-main">{{ $t('m.settingBasic') }}</div>
        <div class="item">
          <div
            class="card"
            v-for="(item, index) in basicList"
            :key="index"
            v-show="item.disabled"
            @click="gotoSetting(item)"
          >
            <img :src="item.img" />
            <div class="title-medium">{{ item.title }}</div>
          </div>
        </div>
      </div>

      <div
        class="setting-box"
        v-if="isArrayEqual([124, 125, 126, 232], permissionsLists) && getUserType() == 1"
      >
        <div class="title-main">{{ $t('m.Setting_Basic') }}</div>
        <div class="item">
          <div
            class="card"
            v-for="(item, index) in operationList"
            :key="index"
            v-show="item.disabled"
            @click="gotoSetting(item)"
          >
            <img :src="item.img" />
            <div class="title-medium">{{ item.title }}</div>
          </div>
        </div>
      </div>

      <div
        class="setting-box"
        v-if="isArrayEqual([127, 128], permissionsLists)"
      >
        <div class="title-main">{{ $t('m.settingAuthSet') }}</div>
        <div class="item">
          <div
            class="card"
            v-for="(item, index) in authList"
            :key="index"
            v-show="item.disabled"
            @click="gotoSetting(item)"
          >
            <img :src="item.img" />
            <div class="title-medium">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 基本设置
      basicList: [],

      // 运营设置
      operationList: [],

      // 权限设置
      authList: [],

      permissionsIds: []
    }
  },
  created () {
    this.$store.state.permissions.forEach(item => {
      this.permissionsIds.push(Number(this.$jsencrypt.decrypt(item)))
    })
    if (!this.permissionsLists(47)) {
      return
    }
    this.basicList = [
      {
        id: 1,
        title: this.$t('m.settingPricePlanSettings'),
        img: require('@/assets/imgs/setting/ic_plan@2x.png'),
        url: '/settings/price-plan',
        disabled: this.permissionsLists(120)
      },
      {
        id: 2,
        title: this.$t('m.Set_rental_term'),
        img: require('@/assets/imgs/setting/ic_prepaymen@2x.png'),
        url: '/settings/prepayment',
        disabled: this.permissionsLists(121)
      },
      {
        id: 3,
        title: this.$t('m.Whitelist'),
        img: require('@/assets/imgs/setting/ic_whitelisting@2x.png'),
        url: '/settings/white-list',
        disabled: this.permissionsLists(122)
      },
      {
        id: 4,
        title: this.$t('m.settingBattery'),
        img: require('@/assets/imgs/setting/ic_lowest@2x.png'),
        url: '/settings/battery',
        disabled: this.getUserType() == 1 && this.permissionsLists(220)
      },

    ]
    this.operationList = [
      {
        id: 5,
        title: this.$t('m.settingHelpCenter'),
        img: require('@/assets/imgs/setting/ic_help@2x.png'),
        url: '/settings/help-center',
        disabled: this.permissionsLists(124)
      },
      {
        id: 6,
        title: this.$t('m.settingContactUs'),
        img: require('@/assets/imgs/setting/ic_contact@2x.png'),
        url: '/settings/customer-contact',
        disabled: this.permissionsLists(125)
      },
      {
        id: 7,
        title: this.$t('m.settingMessagePush'),
        img: require('@/assets/imgs/setting/ic_notify@2x.png'),
        url: '/settings/message-push',
        disabled:  this.permissionsLists(126)
      },
      {
        id: 8,
        title: this.$t('m.Tax_setting'),
        img: require('@/assets/imgs/setting/ic_tax.svg'),
        url: '/settings/tax-set',
        disabled: this.permissionsLists(232)
      },
    ]
    this.authList = [
      {
        id: 9,
        title: this.$t('m.Roles_and_Permissions'),
        img: require('@/assets/imgs/setting/ic_role@2x.png'),
        url: '/settings/role',
        disabled: this.permissionsLists(127)
      },
      {
        id: 10,
        title: this.$t('m.Operation_log'),
        img: require('@/assets/imgs/setting/ic_log@2x.png'),
        url: '/settings/operation-log',
        disabled: this.permissionsLists(128)
      }
    ]
  },
  methods: {
    //权限id校验
    permissionsLists (val) {
      return this.permissionsIds.includes(val)
    },
    gotoSetting (item) {
      if (item.disabled) {
        this.remPageNum()
        this.$router.push(item.url)
      }
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  .setting-box {
    .item {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      align-items: center;

      margin-top: 16px;

      .card {
        width: calc(25% - #{16px} * 3);
        cursor: pointer;
        padding: 20px 16px;
        margin-right: 16px;
        margin-bottom: 20px;

        display: flex;
        justify-content: flex-start;
        align-items: center;

        border: none;

        .title-medium {
          font-size: 17px;
          line-height: 24px;
        }
        & > img {
          width: 56px;
          height: 56px;
          margin-right: 8px;
          color: $color;
        }
      }
    }
  }
}
</style>
